;
(function (node) {
    var TodoList = function () {
        var _self = this; //保存this指针->指向TodoList
        this.node = node; // wrap元素
        this.inputShow = false; // 输入框的显示状态
        this.isEdit = false; // 是否为编辑状态
        this.curIdx = null; // 当前点击的li的下标
        //用dConfig对象保存配置项
        this.dConfig = {
            addBtn: "",
            inputArea: "",
            itemClass: "",
            list: "",
            plusBtn: "",
        }

        this.config = this.getConfig(); // 用变量保存配置的json对象
        this.itemClass = this.config.itemClass; //保存li的类目名

        for (var key in this.dConfig) {
            //判断json对象里面的配置项是否为空，为空提示相应的错误信息 
            if (!this.config.hasOwnProperty(key)) {
                console.log(errorInfo(key));
                return;
            }
        }

        this.setConfig();
        //点击+按钮
        addEvent(this.plusBtn, 'click', function () {
            _self.showInput.call(_self);
        });

        addEvent(this.addBtn, 'click', function () {
            _self.addBtnClick.call(_self);
        });

        addEvent(this.oList, 'click', function (e) {
            var e = e || window.event,
                tar = e.target || e.srcElement;
            _self.listClick.call(_self, tar);
        });
    }

    TodoList.prototype = {
        getConfig: function () {
            //JSON.parse()将json字符串转为json对象
            return JSON.parse(this.node.getAttribute('data-config')); //获取wrap里面的json数据
        },

        setConfig: function () {
            var config = this.config,
                node = this.node;
            this.inputArea = node.getElementsByClassName(config.inputArea)[0]; //输入框模块
            this.addBtn = this.inputArea.getElementsByClassName(config.addBtn)[0]; // +按钮
            this.plusBtn = node.getElementsByClassName(config.plusBtn)[0]; // 新增项目按钮
            this.oList = node.getElementsByClassName(config.list)[0]; // ul
            //this.content = this.inputArea.getElementById('textInput');
            this.content = this.inputArea.getElementsByClassName('textInput')[0]; //input输入框
        },

        // 输入框模块的显示、隐藏
        showInput: function () {
            var _self = this;
            if (this.inputShow) {
                setInputShow.call(_self, 'close');
            } else {
                setInputShow.call(_self, 'open');
            }
        },

        addBtnClick: function () {
            var content = this.content.value,
                contentLen = content.length,
                oItems = this.oList.getElementsByClassName(this.itemClass),
                itemLen = oItems.length,
                text,
                _self = this;

            if (contentLen <= 0) {
                return;
            }

            if (itemLen > 0) {
                for (var i = 0; i < itemLen; i++) {
                    text = elemChildren(oItems[i])[0].innerText;
                    if (text === content) {
                        alert('已存在该项');
                        return;
                    }
                }
            }

            if (this.isEdit) {
                elemChildren(oItems[this.curIdx])[0].innerText = this.content.value;

                setInputStatus.apply(_self, [oItems, null, 'add']);
            } else {
                var oLi = document.createElement('li');
                oLi.className = this.itemClass;
                oLi.innerHTML = itemTpl(content);
                this.oList.appendChild(oLi);
            }
            setInputShow.call(_self, 'close');
        },

        listClick: function (tar) {
            var _self = this,
                className = tar.className,
                oParent = elemParent(tar, 2),
                oItems = this.oList.getElementsByClassName(this.itemClass),
                itemLen = oItems.length,
                item;

            if (className === 'edit-btn fa fa-edit') {
                for (var i = 0; i < itemLen; i++) {
                    item = oItems[i];
                    item.className = 'item';
                }
                oParent.className += ' active';
                setInputShow.call(_self, 'open');
                setInputStatus.apply(_self, [oItems, oParent, 'edit']);
            } else if (className === 'remove-btn fa fa-times') {
                oParent.remove();
            }
        }
    }

    function errorInfo(key) {
        return new Error(
            '您没有配置参数' + key + '\n' +
            '必须配置的参数列表如下：  \n' +
            '打开输入框按钮元素类名：plusBtn\n' +
            '输入框元素类名： inputArea\n' +
            '增加项目按钮元素类名：addBtn\n' +
            '列表承载元素类名：list\n' +
            '列表项承载元素类名：itemClass'
        );
    }

    //根据状态控制输入框模块的显示、隐藏
    function setInputShow(action) {
        if (action === 'open') {
            this.inputArea.style.display = 'block';
            this.inputShow = true;
        } else if (action === 'close') {
            var oItems = this.oList.getElementsByClassName(this.itemClass);
            this.inputArea.style.display = 'none';
            this.inputShow = false;
            this.content.value = '';
            setInputStatus.apply(this, [oItems, null, 'add']);
        }
    }

    function setInputStatus(oItems, target, status) {
        if (status === 'edit') {
            var idx = Array.prototype.indexOf.call(oItems, target),
                text = elemChildren(target)[0].innerText;
            this.addBtn.innerText = '编辑第' + (idx + 1) + '项';
            this.isEdit = true;
            this.curIdx = idx;
            this.content.value = text;
        } else if (status === 'add') {
            var itemLen = oItems.length,
                item;

            for (var i = 0; i < itemLen; i++) {
                item = oItems[i];
                item.className = this.itemClass;
                this.addBtn.innerText = '增加项目';
                this.isEdit = false;
                this.curIdx = null;
            }
        }
    }

    function itemTpl(text) {
        return (
            '<p class="item-content">' + text + '</p>' +
            '<div class="btn-group">' +
            '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
            '<a href="javascript:;" class="remove-btn fa fa-times"></a>' + '</div>'
        )
    }

    new TodoList();
})(document.getElementsByClassName('wrap')[0]);